<script setup lang="ts">
import Title from './Title.vue'
import { generateId } from '../utils'
import { ref } from 'vue'
import type { Transaction } from '../types'

const title = ref('')
const amount = ref<number | null>(null)

const emit = defineEmits<{
  (e: 'transactionSubmitted', value: Transaction): void
}>()

function addTransaction() {
  if (amount.value) {
    emit('transactionSubmitted', {
      id: generateId(),
      title: title.value,
      amount: amount.value
    })
  }
  title.value = ''
  amount.value = null
}
</script>
<template>
  <Title>添加一笔流水账单</Title>

  <form id="form" @submit.prevent="addTransaction">
    <div>
      <label for="title">文案</label>
      <input v-model="title" type="text" id="title" placeholder="输入内容" />
    </div>
    <div>
      <label for="amount">
        金额
        <!-- 直接换行 -->
        <br />
        <span class="describe">负数(支出) | 正数(收入)</span>
      </label>
      <input v-model.number="amount" type="number" id="amount" placeholder="输入金额" />
    </div>
    <button class="add-btn" type="submit">添加</button>
  </form>
</template>

<style lang="scss" scoped>
@import '../scss/_variables.scss';
label {
  display: block;
  margin: 10px 0;

  .describe {
    color: rgb(112, 111, 111);
    font-size: small;
  }
}

input {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
  border: 1px solid rgb(144, 143, 143);
}

.add-btn {
  padding: 10px;
  width: 100%;
  font-size: 16px;
  border: none;
  cursor: pointer;
  color: white;
  background-color: rgb(155, 47, 213);
  box-shadow: $box-shadow;
}
</style>
